<template>
  <div class='app-container'>
		<el-form class="filter-container" label-position="left" label-width="68px">
			<el-row :gutter="24">
				<el-col :span="4">
					<el-form-item label="用户ID" style="margin-bottom: 0!important;">
						<el-input @keyup.enter.native="getList" class="filter-item" placeholder="请输入名称" v-model.trim="listQuery.custid"></el-input>
					</el-form-item>
				</el-col>
				<!--<el-col :span="8">
					<el-form-item label="推荐时间" style="margin-bottom: 0!important;">
						<el-date-picker type="datetimerange" :default-time="['00:00:00', '23:59:59']" @keyup.enter.native="getList" class="filter-item" align="right" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" v-model="time" :picker-options="pickerOptions">
						</el-date-picker>
					</el-form-item>
				</el-col>-->
				<el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">{{$t('table.search')}}</el-button>
			</el-row>
		</el-form>
    <el-table stripe :data="tableData" v-loading="listLoading" element-loading-text="加载中..." border fit  highlight-current-row style="width: 100%">
	    <el-table-column prop="custid" label="用户ID" align="center"></el-table-column>
	    <el-table-column prop="title" label="资讯标题" align="center" min-width="150"></el-table-column>
	    <el-table-column prop="recommendTime" label="推荐时间" align="center"></el-table-column>
      <el-table-column align="center" label="阅读状态">
        <template slot-scope="scope">
          <el-tag size="small" :type="formatClass(scope.row.flagRead)">{{ formatStatu(scope.row.flagRead) }}</el-tag>
        </template>
      </el-table-column>
	    <el-table-column label="推荐类型" align="center">
        <template slot-scope="scope">
        	<span>{{ formatCate(scope.row.recommendCate) }}</span>
        </template>
	    </el-table-column>
	    <el-table-column prop="newsPublish" label="资讯时间" align="center"></el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10,20,30,50]" :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
	import { uerRpageList } from '@/api/recommend'

  export default {
    name: 'userRecmdInfo',
    watch: {
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = false
//      if (this.time) {
//        this.listQuery.startTime = this.time[0]
//        this.listQuery.endTime = this.time[1]
//      } else {
//        this.listQuery.startTime = ''
//        this.listQuery.endTime = ''
//      }
				uerRpageList(this.listQuery).then(res => {
					this.tableData = res.Data
					this.total = res.total * 1
					this.listLoading = false
				})
      },
    	formatClass (data) {
        switch (data) {
          case 1:
            return 'success' // '已阅读'
          case 0:
            return 'warning' // '未阅读'
        }
      },
    	formatStatu (data) {
        switch (data) {
          case 1:
            return '已阅读'
          case 0:
            return '未阅读'
        }
      },
  		formatCate (data) {
        switch (data) {
          case 'profile':
            return '用户画像'
          case 'hotspot':
            return '热点'
          case 'cbitem':
            return '内容推荐'
      		case 'cfuser':
            return '协同过滤 '
        }
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val
        this.getList()
      }
    },
    data() {
      return {
        total: 0,
        listLoading: false,
        time: ['', ''],
        listQuery: {
          pageNum: 1,
          pageSize: 20,
          custid: ''
        },
        tableData: [],
				pickerOptions: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							const end = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() - 1000
							const start = end + 1000 - 3600 * 1000 * 24
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近三天',
						onClick(picker) {
							const end = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() - 1000
							const start = end + 1000 - 3600 * 1000 * 24 * 3
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近一周',
						onClick(picker) {
							const end = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() - 1000
							const start = end + 1000 - 3600 * 1000 * 24 * 7
							picker.$emit('pick', [start, end])
						}
					}]
				}
      }
    }
  }
</script>

<style type="scss" scoped>
  .col {
    margin: auto;
  }

  .card-body {
    margin-top: 1rem;
  }

  .form {
    max-width: 500px !important;
    margin: auto !important;
  }
</style>

<style>
  .el-tag {
    margin-right: 3px;
    background-color: rgba(64, 158, 255, .1);
    color: #409EFF;
    border-radius: 4px;
    padding: 0 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid rgba(64, 158, 255, .2);
  }
</style>


